@include('Admin.public.head')
<body>
<style type="text/css">
    #my-popup {
        max-height: 360px;
        overflow: auto;
    }

     #my-popups {
        max-height: 360px;
        overflow: auto;
    }

    #opend-p{
        margin-left: 25%;
        margin-top: 2.5%;
    }
    #inventory-popus div{
        float: left;
        margin-right: 35px;
        margin-left: 10%;
    }
    #inventory-popuss div{
        float: left;
        margin-right: 35px;
        width: 103px;
        margin-left: 10%;
    }
</style>
<body>
@include('Admin.public.menu')
<!-- 引入样式 -->
{{--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--}}
<div class=" admin-content" id="app">
    {{ csrf_field() }}
    <div class="daohang">
        <ul>
            <li>
                <button type="button" class="am-btn am-btn-default am-radius am-btn-xs"> 首页
            </li>
            <li>
                <button type="button" class="am-btn am-btn-default am-radius am-btn-xs">帮助中心<a
                            href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
                </button>
            </li>
            <li>
                <button type="button" class="am-btn am-btn-default am-radius am-btn-xs">奖金管理<a
                            href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
                </button>
            </li>
            <li>
                <button type="button" class="am-btn am-btn-default am-radius am-btn-xs">产品管理<a
                            href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close="">×</a>
                </button>
            </li>
        </ul>
    </div>

    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-users">门店收益</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">门店收益</a></dl>
            <!--这里打开的是新页面-->
        </div>


         <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
           <ul>
               <li>
                    <template>
                        <el-select v-model="keyword.consum_type" placeholder="消费类型">
                            <el-option
                                    size="medium"
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </li>
                   <li>
                    <template>
                        <el-select v-model="keyword.profit_type" placeholder="门店收益类型">
                            <el-option
                                    size="medium"
                                    v-for="item in optionss"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                </li>
                <li>
                    <div class="block">
                        <el-date-picker
                                v-model="keyword.addtime"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </li>
               <li>
                   <el-input v-model="keyword.keywords" class="keywords" placeholder="请输入关键字"></el-input>
               </li>
               <li>
                   <el-button type="primary" v-on:click="changeClick()">搜索</el-button>
               </li>
               <li>
                   <el-button type="success" v-on:click="exportUser()">导出</el-button>
               </li>
               <li>
                   <el-button type="danger" v-on:click="resetOrder()">重置</el-button>
               </li>
           </ul>
       </div>
   




        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th class="table-id">#id</th>
                    <th class="table-title">门店编号</th> 
                    <th class="table-title">消费订单号</th>
                    <th class="table-title">消费类型</th> 
                    <th class="table-title">门店收益类型</th> 
                    <th class="table-title">返币金额(奖励币)</th>
                    <th class="table-title">来源说明</th>
                    <th class="table-title">收益时间</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="val,index in record">
                        <td>@{{val.id}}</td>
                        <td>@{{val.store_number}}</td>
                        <td>@{{val.ordersn}}</td>
                        <td>@{{val.consum_type}}</td>
                        <td>@{{val.profit_type}}</td>
                        <td>@{{val.currency}}</td>
                        <td>@{{val.source}}</td>
                        <td>@{{val.addtime}}</td>
                    </tr>
                </tbody>
            </table>
             总收益:<span class="am-badge am-badge-danger am-radius">@{{ total }}</span>
            <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page="PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                    </el-pagination>
                </div>
            </ul> 
        </form>
        <!-- 引入组件库 -->
        {{--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--}}
        <script type="text/javascript">

        </script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    options: [{
                        value: 1,
                        label: '老会员绑定门店报单'
                    }, {
                        value: 2,
                        label: '老会员绑定门店复销'
                    }, {
                        value: 3,
                        label: '并未绑定门店'
                    }],
                    optionss: [{
                        value: 1,
                        label: '终身门店身份收益'
                    }, {
                        value: 2,
                        label: '消费门店身份收益'
                    }],
                    record:[],
                    total:'',
                    PagesData: [],//分页
                    pase: '',
                    index:'',
                    keyword: { //关键字搜索
                        keywords: '',//关键字
                        consum_type:'',
                        profit_type:'',
                        addtime: ''//收益时间
                    },
                },
                //事件
                methods: {
                    //选择当前页
                    changeClick: function (e) {
                        var rico = this
                        $.get("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'select_store_record',
                            page: e,
                            keyword: app.keyword
                        }, function (res) {
                            if (res.code) {
                                app.record = res.data.record.data;
                                app.PagesData = res.data.record;
                                for (var i=0;i<app.record.length;++i){
                                    app.record[i].addtime = rico.formatDateTime(app.record[i].addtime);
                                }
                            }
                        });
                    },
                    initialize: function () {
                        var rico = this
                        $.post("/admin/stores/stores", {
                            '_token': '{{csrf_token()}}',
                            class: 'select_store_record',
                        }, function (res) {
                            if (res.code) {
                                app.record = res.data.record.data;
                                app.total = res.data.total;
                                app.PagesData = res.data.record;
                                app.pase = res.data.record.current_page;
                                for (var i=0;i<app.record.length;++i){
                                    app.record[i].addtime = rico.formatDateTime(app.record[i].addtime); 
                                }
                            }
                        });
                    },
                    formatDateTime:function (timeStamp) {
                        var date = new Date();
                        date.setTime(timeStamp * 1000);
                        var y = date.getFullYear();
                        var m = date.getMonth() + 1;
                        m = m < 10 ? ('0' + m) : m;
                        var d = date.getDate();
                        d = d < 10 ? ('0' + d) : d;
                        var h = date.getHours();
                        h = h < 10 ? ('0' + h) : h;
                        var minute = date.getMinutes();
                        var second = date.getSeconds();
                        minute = minute < 10 ? ('0' + minute) : minute;
                        second = second < 10 ? ('0' + second) : second;
                        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
                    },
                     //重置
                    resetOrder: function () {
                        location.reload();
                    },
                    //导出
                    exportUser: function () {
                        location.href = "/admin/stores/exportRecord?keywords=" + app.keyword.keywords + '&addtime=' + app.keyword.addtime + '&consum_type=' +app.keyword.consum_type + '&profit_type=' + app.keyword.profit_type;
                    } 
                },
                //自动执行
                mounted: function () {
                    this.initialize();//分公司
                },
            })
        </script>
@include('Admin.public.foot')